import _ from "lodash";
import { Row } from "antd";
import React from "react";
import Props from '../../designer/form/component/base/Props';
import { WeaInputNumber, WeaLocaleProvider, WeaCheckbox, WeaHelpfulTip} from "ecCom";
import { isChecked } from '../../../utils/statusDetect';
import { CHECKED } from '../../../constants/common';
const getLabel = WeaLocaleProvider.getLabel;

export default class CheckLength extends Props {

      // refs: ["min.checked", "max.value", "subTitle"]
  refsMinV = minV => {
    const { max } = this.props.data;
    const maxLimit = max.limit;//暂时只有text类型用到2020-4-10。
    const values = {
      subTitle: '',
      "min.checked": CHECKED
    };
    let maxV = max.value;

    if (isChecked(max.checked)) {
      maxV = Math.max(minV, maxV);
    } else {
      maxV = '';
    }
    if (maxLimit && minV > maxLimit) minV = maxLimit;
    if (maxLimit && maxV > maxLimit) maxV = maxLimit;
    values.subTitle = _subTitle(maxV, minV);

    if (maxV) {
      values["max.value"] = maxV;
    }

    return values;
  }

  // refs: ["max.checked", "min.value", "subTitle"]
  refsMaxV = maxV => {
    const { min } = this.props.data;
    const values = {
      subTitle: '',
      "max.checked": CHECKED
    };
    let minV = min.value;

    if (isChecked(min.checked)) {
      minV = Math.min(maxV || 1, minV)
    } else {
      minV = '';
    }

    values.subTitle = _subTitle(maxV, minV);

    if (minV || minV === 0) {
      values["min.value"] = minV;
    }

    return values;
  }

    refsMaxC = value => {
        const { max, min } = this.props.data;
        const checked = CHECKED === value;
        const minV = isChecked(min.checked, min.value);
        const values = {};
        let maxV = max.value;
    
        if(checked && (max.value === '' || min.value > max.value)) {
          maxV = Math.max(min.value, 1);
          values["max.value"] = maxV;
        }
    
        values.subTitle = _subTitle(isChecked(value, maxV), minV);
    
        return values;
      }
    
      // refs: ["min.value", "subTitle"]
      refsMinC = value => {
        const defaultData = this.props.defaultData;
        const { min = defaultData.min, max = defaultData.max } = this.props.data;
        const checked = CHECKED === value;
        const maxV = isChecked(max.checked, max.value);
        const values = {};
        let minV = min.value;
    
        if(checked && min.value === '') {
          minV = 1;
          values["min.value"] = minV;
        }
    
        values.subTitle = _subTitle(maxV, isChecked(value, minV));
    
        return values;
      }
    render(){
        const defaultData = this.props.defaultData;
        const { min = defaultData.min, max = defaultData.max } = this.props.data;
        const numStyle = { display: 'inline-block', width: 75, padding: '0 5px 5px 0' };
        const { type } = this.props;

        return (
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@uzvyte`}>
            <label>{getLabel('502526', '填写设置')}</label>
            <div>
              <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@lxm6zx`}
                value={min.checked}
                content={<span>{getLabel('511413', '最少填')}</span>}
                onChange={this.handlePropChange("min.checked:(refs=refsMinC)")}
              />
              <div style={numStyle}>
                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@c05201`}
                  value={min.value}
                  min={1} max={type != "text" ? max.limit : 100}
                  onChange={this.handlePropChange(`min.value:(number={"dft":1}):(refs=refsMinV)`)}
                />
              </div>
              {getLabel('511415', '个字')}
            </div>
            <div>
              <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@8l78vi`}
                value={max.checked}
                content={<span>{getLabel('511414', '最多填')}</span>}
                onChange={this.handlePropChange("max.checked:(refs=refsMaxC)")}
              />
              <div style={numStyle}>
                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@cefqhg`}
                  value={max.value}
                  min={min.value} max={type != "text" ? max.limit : 100}
                  onChange={this.handlePropChange(`max.value:(number={"dft":1}):(refs=refsMaxV)`)}
                />
              </div>
              {getLabel('511415', '个字')}
              &nbsp;&nbsp;&nbsp;&nbsp;
              {
                type != "text" ? null : <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@a7ynbn`}
                    title={`<div>${getLabel('518669','单行文本字段最大只支持填写100个汉字。') }</div>`}
                    placement="topRight"
                />
              }
            </div>
          </Row>
        );
    }
}

const _subTitle = (maxV, minV) => {
  const hasMaxV = _.isNumber(maxV);
  const hasMinV = _.isNumber(minV);
  let subTitle = '';

  if(minV === 0 && maxV === 0) return subTitle;

  if(hasMaxV && hasMinV) {
    if(maxV == minV) {
      subTitle = `${getLabel('502542', '请填写') + minV + getLabel('511415', '个字')}`
    } else {
      subTitle = `${getLabel('502542', '请填写') + minV}-${maxV + getLabel('511415', '个字')}`;
    }
  } else if(hasMinV && minV !== 0) {
    subTitle = `${getLabel('511416', '最少请填写') + minV + getLabel('511415', '个字')}`
  } else if(hasMaxV && maxV !== 0) {
    subTitle = `${getLabel('511417', '最多请填写') + maxV + getLabel('511415', '个字')}`;
  }

  return subTitle;
}

export { _subTitle };